const webpack=require('webpack');
const path=require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//导入在内存中生成html的插件
//只要是插件都一定要放到plugins节点中
const htmlWebpackPlugin=require('html-webpack-plugin');
//这个配置文件，起初就是一个js文件，通过node的模块操作，向外暴露了一个配置对象
module.exports={
  //指定入口和出口
  entry:path.join(__dirname,'./src/js/main.js'),//__dirname两个下划线
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
},
  plugins: [//配置插件的节点

    new htmlWebpackPlugin({//创建一个在内存中生成html的插件
      template:path.resolve(__dirname,'./src/index.html'),//指定模板页面，将来会根据页面路径，去生成内存中的页面
      filename:'index.html'//指定生成的页面的名称
    }),
      new VueLoaderPlugin(),
  ],
  module: {//这个节点用于配置所有的第三方模块加载器
    rules:[//所有第三方模块的匹配规则
    //   // {test:/\.css$/,use:['style-loader','css-loader']},//匹配所有以.css结尾的文件
      { test: /\.css$/, use: ['style-loader', 'css-loader']},//配置处理的第三方loader规则，从后往前调用
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//处理.less文件的第三方loader规则
        { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
        {test:/\.(jpg|png|gif|bmp|jpeg)$/ ,use:['url-loader?limit=500&name=[hash:8]-[name].[ext]']},//处理图片的url地址,limit限制的字节数大于图谱按的字节数，则会按照64编码的方式保存图片。
      {test:/\.(ttf|eot|svg|woff|woff2)$/,use:['url-loader']},//处理文字
      // 如果小于或者等于，则按照原本的格式存储.name=[name]:不改变图片的名字，[ext],后缀名,[hash:8]避免同名，给同名的文件加上标识
      {test:/\.js$/,use:"babel-loader",exclude:/node_modules/},//配置Babel来转化高级的语言
      {test:/\.vue$/,use:'vue-loader'}//处理vue文件的loader
    ]
    // loaders:[
    //   { test: /\.css$/, loader: 'style-loader!css-loader' },
    // ]
  },
  mode: 'development' ,// 设置mode
};
/*
* 使用wabpack-dev-server这个工具，实现自动打包编译的功能
* 1.运行npm i webpack-dev-server -D这个工具安装到项目的本地开发依赖
*2.安装完毕后，这个工具的用法和webpack命令的用法完全一致
*cnpm i 重装依赖包
* 3.由于在项目中本地安装的webpack-dev-server,所以无法把它当做脚本奔命令，在
* powershell终端直接运行；（只有那些安装到全局-g的工具，才能在终端中正常运行）
* 4.注意：webpack-dev-server这个工具，如果想要正常运行，
* 要求在本地项目中安装webpack。命令：cnpm i webpack -D
* 5.webpack-dev-server帮我们打包生成的bundle.js文件，并没有放到实际的物理盘中，放到内存中，所以，我们在项目根目录中
* ，根本找不到打包好的bundle.js(不可见)
*
*
* */

